<template>
    <swiper
        class="swiper"
        :autoplay="isAuto"
        circular
        :vertical="isVertical"
        :current="swiperCurrent"
        :style="{ height: swiperHeight }"
        @animationfinish="changeSwiperCurrent"
    >
        <swiper-item :key="index" v-for="(item, index) in list">
            <groupItem 
                :itemObj="item"
                :detailInfo="detailInfo"
                :productInfo="productInfo"
                :isTandianFull="isTandianFull"
                :isExpire="isExpire"
            /> 
        </swiper-item>
    </swiper>
</template>

<script>
import groupItem from './groupItem';
export default {
    name: 'swiperGroup',
    options: {
		virtualHost: true
	},
    components:{ groupItem },
    props:{
        list: {
			type: Array,
			default: () => []
		},
        isAuto: {
            type:Boolean,
            default:false
        },
        isVertical: {
            type:Boolean,
            default:false
        },
        height: {
			type: [String, Number],
			default: 360
		},
        detailInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		productInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		isTandianFull: {
			type: Boolean,
			default: false
		},
        isExpire: {
			type: Number,
			default: 0 // 是否在有效期内 0-在;1-不在
		}
    },
    computed: {
		swiperHeight() {
			const { height } = this;

			return isFinite(height) ? `${uni.upx2px(height)}px` : height;
		}
    },
    watch: {
		list() {
			this.swiperCurrent = 0;
		}
	},
    methods:{
        changeSwiperCurrent(e) {
			this.swiperCurrent = e?.detail?.current || 0;
		},

        openDetail(){
            uni.navigateTo({
				url
			});
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.swiper{
    position: relative;
	overflow: hidden;
    height: 100%;
    swiper-item {
        height: 100%;
    }
}
</style>